import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TouchableWithoutFeedback, FlatList } from "react-native";
import CustomerHeader from "../../widget/customerHeader";
import  LinearGradient from 'react-native-linear-gradient';

export default class FansList extends Component{
  constructor(props) {
    super(props);
    this.state={
      dataList:[{
        value:1,
        label:1
      },{
        value:2,
        label:2
      },{
        value:3,
        label:3
      },{
        value:4,
        label:4
      }]
    }
  }
  _renderItem=(info)=>{
    return(
      <TouchableWithoutFeedback>
        <View style={styles.cell}>
          <Image style={styles.portrait} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>
          <View style={styles.info}>
            <Text style={styles.name}>兔子爱吃胡萝卜</Text>
            <Text style={styles.message}>该用户关注了你</Text>
          </View>
          <LinearGradient colors={['#e79c58','#f8da85']} style={styles.focus}>
            <Text style={styles.focusTitle}>回关</Text>
          </LinearGradient>
        </View>
      </TouchableWithoutFeedback>
    )
  }
  render(){
    return (
      <View style={{flex:1,backgroundColor:'#fff'}}>
        <CustomerHeader showLine={true} title={'粉丝'} leftOnPress={()=>{this.props.navigation.pop()}}></CustomerHeader>
        <FlatList data={this.state.dataList}
                  renderItem={this._renderItem}
                  keyExtractor={item => item.value}>
        </FlatList>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  cell:{
    position: 'relative',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    height:73,
    paddingHorizontal:15
  },
  portrait:{
    width:45,
    height:45,
    borderRadius: 22.5
  },
  info:{
    flex:1,
    marginLeft:9
  },
  flex:{
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  name:{
    color:'#000000',
    fontSize: 15
  },
  message:{
    color:'#9B9B9B',
    fontSize:13,
    marginTop:8
  },
  focus:{
    width:64,
    height:30,
    borderRadius:15
  },
  focusTitle:{
    color:'#fff',
    flex:1,
    lineHeight:30,
    textAlign:'center'
  }
})
